<template>
  <el-col class="left-col" :xs="24" :lg="5">
    <div class="left-content">
      <el-card class="box-card clearfix">
        <div slot="header">标签</div>
        <el-tag size="medium">
          <router-link to="/" class="el-link el-link--default">全部</router-link>
        </el-tag>
        <el-tag size="medium" v-for="item in labels" :key="item.id">
          <router-link :to="'/label/'+item.id" class="el-link el-link--default">{{item.name}}<span class="text-danger">{{item.articleCount}}</span></router-link>
        </el-tag>
      </el-card>
    </div>
  </el-col>
</template>

<script>
export default {
  data () {
    return {
      labels: []
    }
  },
  methods: {
    loadData () {
      this.$api.index.getLables().then(res => {
        if (res.code === 0) {
          this.labels = res.data
        }
      })
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>

<style lang="scss">
.left-col {
  .el-tag {
    display: block;
    float: left;
    margin: 0 10px 10px 0;
  }
}
</style>
